import './index.scss';
import {useEffect} from "react";
import * as echarts from 'echarts'
import IMG01 from '../../assets/images/data-s-01.png'
import IMG02 from '../../assets/images/data-s-02.png'
import {Logger} from "sass";
import {moneyType} from "../../utils";

const TEMP_DATA =[
    { value: 100, name: '征信数据' },
    { value: 345, name: '政务数据' },
    { value: 890, name: '外部评估数据' },
    { value: 345, name: '金融市场' },
    { value: 890, name: '内部数据' },
]

const DataStatistics = () => {

    useEffect(()=>{
        init()
    },[])

    function init() {
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示
        let myChart = echarts.init(document.getElementById("left-ds"));
        let option = {
            color: ['#F7C739','#F76C0A','#09D48F','#6347F9','#146BE9'],
            legend: {
                orient: 'vertical',
                right: 10,
                y: 'center',
                itemHeight: 6, // 图例icon大小
                icon: 'circle',
                formatter: function(name:any) {	// 添加
                    let total = 0
                    let target = 0
                    for (let i = 0; i < TEMP_DATA.length; i++) {
                        total += TEMP_DATA[i].value
                        if (TEMP_DATA[i].name === name) {
                            target = TEMP_DATA[i].value
                        }
                    }
                    return name+'\n'+target
                },
                textStyle: {
                    //图例文字的样式
                    color: '#fff',
                    fontSize: 10,
                },
            },
            grid: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
            },
            series: [
                {
                    type: 'pie',
                    radius: ['59%', '70%'],
                    center: ['29%','50%'],
                    avoidLabelOverlap: false,
                    silent:'ture',//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                    label: {
                        position: 'center',
                        show: true,
                        formatter:function(){
                            let str = '{a|'+moneyType(3735)+'}' + '\n' +'{b|数据源调用总量}'
                            return str
                        },
                        rich:{
                            a:{
                                color:'#3DE6FF',//a、b不设置颜色的话，字体颜色就会是饼图颜色的混合色
                                fontSize:'20',
                                fontWeight: 500,
                                height: '20'
                            },
                            b:{
                                fontSize:'11',
                                color:'#FFF',
                                height: '20'
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: TEMP_DATA
                },
                {
                    name: '外边框',
                    type: 'pie',
                    radius: ['59%', '70%'],
                    center: ['29%','50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal:{
                            color:function(params: { dataIndex: number; }){//渐变色
                                let colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#0A284C',
                            borderWidth: 2,
                        },
                    },
                    label: {
                        normal: {
                            position: 'inner',
                            show : false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:TEMP_DATA,
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

  return (
      <div className='ds-container'>
          <div className='ds-title'>数据概览</div>
          <div className='ds-content flex-row-center' style={{justifyContent: 'space-between'}}>
              <div className='flex-col-start' style={{marginLeft: '24px',justifyContent: 'space-between',height: '130px'}}>
                  <div className='flex-row-start'>
                      <img src={IMG01} className='ds-img'/>
                      <div className='flex-col-start' style={{marginLeft: '11px'}}>
                          <div className='ds-label'>数据供应商</div>
                          <div className='ds-value'>20<span style={{fontSize: '12px'}}>家</span></div>
                      </div>
                  </div>

                  <div className='flex-row-start' style={{marginTop: '16px'}}>
                      <img src={IMG02} className='ds-img'/>
                      <div className='flex-col-start' style={{marginLeft: '11px'}}>
                          <div className='ds-label'>接入数据源</div>
                          <div className='ds-value'>684</div>
                      </div>
                  </div>
              </div>
              <div id='left-ds' className='ds-echart'/>
          </div>
      </div>
  )
}

export default DataStatistics;
